<template>
  <div class="create_p_item_container">
    <el-row :gutter="20" class="create_p_i_c_content">
      <el-col class="flex_container" v-for="types in projectTypeData" :key="types.uuid" :span="8">
        <div class="create_p_item_div" @click="createToProject(types.type)">
          <img :src="types.imgSrc"  alt=""/>
          <div class="create_p_item_div_title">
            {{ types.title }}
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CreateProjectItem',
  props: {
    projectTypeData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    createToProject(type) {
      this.$router.push(`project/add/${type}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.create_p_i_c_content {
  .create_p_item_div {
    cursor: pointer;
    width: 264px;
    height: 300px;
    background: #FFFFFF;
    box-shadow: 3px 3px 10px 0 rgba(9, 33, 56, 0.1);
    border-radius: 24px;

    .create_p_item_div_title {
      font-size: 24px;
      font-weight: 500;
      color: #212121;
      line-height: 86px;
    }
  }
}

</style>
